<template>
  <div class="layer" id="layer" ref="layer" :class="{layerActive:layerActive}">
    <div class="mask" @click="close"></div>
    <div class="layer_body">
      <div ref="layer_body" class="bgColor">
        <router-view/>
      </div>
    </div>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'

export default {
  components: {},
  computed: {
    ...mapGetters([
      'userDetail'
    ]),
    isWindowSize () {
      return this.$store.state.isWindowSize
    }
  },
  data () {
    return {
      layerActive: false,
      bgColor: '#FFFFFF',
    }
  },
  watch: {
    isWindowSize (params) {
      this.layerActive = params
    }
  },
  mounted () {
    let _t = window.setInterval(() => {
      if (this.userDetail.mem_id) {
        window.clearInterval(_t)
        let main = document.querySelector('#layer')
        if (!main.clientHeight) {
          window.location.reload()
        }
      }
    }, 60)
  },
  methods: {
    close () {
      if (window.huo) {
        let ua = navigator.userAgent
        let appData = ua.split('=')[1]
        if (!!appData) {
          appData = JSON.parse(appData)
        }
        if (appData && appData.environment.indexOf('flutter') != -1) {
          window.parent.postMessage(JSON.stringify({
            type: 'ious.close',
            value: ''
          }), '*')
        } else {
          window.huo.closeWeb()
        }
      } else {
        window.parent.postMessage(JSON.stringify({
          type: 'ious.close',
          value: ''
        }), '*')
      }
    }
  },
  created () {
    this.$store.dispatch('getBaseInfo')
  },
  name: 'App'
}
</script>

<style lang="scss" scoped>
.layer {
  bottom: 0;
  width: 100%;
  position: fixed;
  left: 0;
  transition: all 1s ease 0s;
  overflow: hidden;

  &_body {
    max-width: 10rem;
    position: relative;

    > div {
      height: 100%;
      width: 100%;
      position: relative;
    }
  }
  // background: #FFFFFF;
  opacity: 0.9;
}

.layer_body {
  height: 10rem;

  .bgColor {
    border-radius: 0.48rem 0.48rem 0rem 0rem;
    background-color: rgb(244, 244, 244);
  }
}

.mask {
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
}

.layerActive {
  animation: myfirst linear .5s forwards;
}

@keyframes myfirst {
  0% {
    top: 8rem;
  }
  50% {
    top: 4rem;
  }
  100% {
    top: 0;
  }
}
</style>
